ARIA: dialog-Rolle

Ein Dialog ist ein untergeordnetes Fenster des Primärfensters einer Webanwendung. Für HTML-Seiten ist das Primärfenster der Anwendung das gesamte Webdokument, d.h. das Body-Element.

Das Markieren eines Dialogelements mit der dialog-Rolle hilft unterstützenden Technologien, den Inhalt des Dialogs als gruppiert und vom Rest des Seiteninhalts getrennt zu identifizieren. Das Hinzufügen von role="dialog" allein ist jedoch nicht ausreichend, um einen Dialog zugänglich zu machen. Zusätzlich muss Folgendes beachtet werden:

• Der Dialog muss ordnungsgemäß beschriftet sein
• Der Tastaturfokus muss korrekt verwaltet werden

Die folgenden Abschnitte beschreiben, wie diese beiden Anforderungen erfüllt werden können.

Auch wenn es nicht erforderlich ist, dass der Dialog selbst den Fokus erhalten kann, muss er dennoch beschriftet werden. Die dem Dialog gegebene Beschriftung liefert kontextuelle Informationen für die interaktiven Steuerelemente im Dialog. Mit anderen Worten, die Beschriftung des Dialogs fungiert als Gruppierungsetikett für die darin befindlichen Steuerelemente (ähnlich wie ein <legend>-Element ein Gruppierungsetikett für die Steuerelemente innerhalb eines <fieldset>-Elements bereitstellt).

Wenn ein Dialog bereits über eine sichtbare Titelleiste verfügt, kann der darin enthaltene Text zur Beschriftung des Dialogs selbst verwendet werden. Der beste Weg, dies zu erreichen, ist die Verwendung des aria-labelledby-Attributs auf dem role="dialog"-Element. Darüber hinaus, wenn der Dialog zusätzlichen beschreibenden Text neben dem Dialogtitel enthält, kann dieser Text mit dem Dialog unter Verwendung des aria-describedby-Attributs verknüpft werden. Dieser Ansatz wird im folgenden Code-Snippet gezeigt:

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

Fokusverwaltung

Ein Dialog hat bestimmte Anforderungen an die Verwaltung des Tastaturfokus:

• Dialoge sollten immer mindestens ein fokussierbares Steuerelement haben. Bei vielen Dialogen gibt es einen Button wie "Schließen", "OK" oder "Abbrechen". Zusätzlich zu dem erforderlichen Steuerelement können Dialoge beliebig viele fokussierbare Elemente enthalten, sogar ganze Formulare oder andere Container-Widgets wie Tabs.
• Wenn der Dialog auf dem Bildschirm erscheint, sollte der Tastaturfokus (dessen Steuerung vom Zweck des Dialogs abhängt) auf das standardmäßig fokussierbare Steuerelement im Dialog verschoben werden. Bei Dialogen, die nur eine grundlegende Nachricht anzeigen, könnte es ein "OK"-Button sein. Bei Dialogen, die ein Formular enthalten, könnte es das erste Feld im Formular sein.
• Nachdem der Dialog geschlossen wurde, sollte der Tastaturfokus zurück an die Stelle verschoben werden, an der er war, bevor er in den Dialog verschoben wurde. Andernfalls kann der Fokus an den Anfang der Seite fallen.
• Für die meisten Dialoge wird erwartet, dass die Tabulatorreihenfolge im Dialog umwickelt, was bedeutet, dass, wenn der Benutzer durch die fokussierbaren Elemente im Dialog tabbt, das erste fokussierbare Element fokussiert wird, nachdem das letzte erreicht wurde. Mit anderen Worten, die Tabulatorreihenfolge sollte innerhalb und vom Dialog eingeschlossen sein.
• Wenn der Dialog verschoben oder in der Größe verändert werden kann, stellen Sie sicher, dass diese Aktionen sowohl von Tastatur- als auch von Mausbenutzern ausführbar sein müssen. Ebenso, wenn ein Dialog spezielle Funktionen wie Symbolleisten oder Kontextmenüs bereitstellt, müssen diese für Tastaturbenutzer erreichbar und bedienbar sein.
• Dialoge können modal oder nicht-modal sein. Wenn ein modaler Dialog auf dem Bildschirm erscheint, ist es nicht möglich, mit irgendwelchen Seiteninhalten außerhalb des Dialogs zu interagieren. Mit anderen Worten, die Hauptanwendungsschnittstelle oder der Seiteninhalt wird als vorübergehend deaktiviert betrachtet, solange der modale Dialog angezeigt wird. Bei nicht-modalen Dialogen ist es immer noch möglich, mit Inhalten außerhalb des Dialogs zu interagieren, während der Dialog angezeigt wird. Beachten Sie, dass es für nicht-modale Dialoge eine globale Tastenkombination geben muss, die es ermöglicht, den Fokus zwischen den geöffneten Dialogen und der Hauptseite zu verschieben.

aria-labelledby

Verwenden Sie dieses Attribut, um den Dialog zu beschriften. Oft wird der Wert des aria-labelledby-Attributs die ID des Elements sein, das den Dialog betitelt.

aria-describedby

Verwenden Sie dieses Attribut, um den Inhalt des Dialogs zu beschreiben.

Wenn die dialog-Rolle verwendet wird, sollte der Benutzeragent Folgendes tun:

• Das Element als Dialog in der Zugänglichkeits-API des Betriebssystems freigeben.

Wenn der Dialog korrekt beschriftet ist und der Fokus auf ein Element (oft ein interaktives Element wie ein Button) im Dialog verschoben wird, sollten Bildschirmleser die zugängliche Rolle, den Namen und optional die Beschreibung des Dialogs ankündigen, zusammen mit der Ankündigung des fokussierten Elements.

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Subscription Form</h2>
  <p id="dialog1Desc">We will not share this information with third parties.</p>
  <form>
    <p>
      <label for="firstName">First Name</label>
      <input id="firstName" type="text" />
    </p>
    <p>
      <label for="lastName">Last Name</label>
      <input id="lastName" type="text" />
    </p>
    <p>
      <label for="interests">Interests</label>
      <textarea id="interests"></textarea>
    </p>
    <p>
      <input type="checkbox" id="autoLogin" name="autoLogin" />
      <label for="autoLogin">Auto-login?</label>
    </p>
    <p>
      <input type="submit" value="Save Information" />
    </p>
  </form>
</div>

Funktionierende Beispiele

• jQuery-UI Dialog

• ARIA: alertdialog-Rolle
• Das HTML <dialog>-Element